
<template>
	<div class="shoukuanzhanghupeizhi">
        <div v-if="!shoujiban">
            <div>
            <left></left>
            <div class="right">
                <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/yongjin' }">财务管理</el-breadcrumb-item>
                        <el-breadcrumb-item>我的账户</el-breadcrumb-item>
                    </el-breadcrumb>
                    <top></top>
                </div>
                <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
                  <div style="padding: 0px 0 20px 0; font-size: 18px; font-weight: 700;" class="flexc">
                    <div><img src="../../../static/img/yongjin3.png" style="width: 22px; margin-right: 10px;"></div>
                    <div>敢探号帐户余额</div>
                    <div style="color: rgb(64, 66, 71); font-size: 14px; margin-left: 20px;">小螺号产生的费用从对应的敢探号账户中扣除</div>
                  </div>

                  <div style="background: #fff; border-radius: 20px; padding: 10px; width: 800px;" class="flexbc">
                    <div class="flexc">
                      <div><img src="../../../static/img/yongjin5.png" style="width: 40px; margin-right: 10px;"></div>
                      <div style="font-size: 24px; color: rgb(2, 12, 29);">{{balance}}</div>
                    </div>
                    <el-button type="danger" round @click="log = true">充值余额</el-button>
                  </div>

                  <div style="padding: 20px 0 20px 0; font-size: 18px; font-weight: 700;" class="flexc">
                    <div><img src="../../../static/img/zu.png" style="width: 22px; margin-right: 10px;"></div>
                    <div>收服项目列表</div>
                  </div>
                  <div style="margin-top: 20px;">
                    <el-table :data="list" style="width: 100%">
                      <el-table-column align="center" prop="sale_name" label="项目" width="200"></el-table-column>
                      <el-table-column align="center" prop="pv" label="条件说明"></el-table-column>
                      <el-table-column align="center" prop="uv" label="价格" width="200"></el-table-column>
                    </el-table>
                  </div>
                </div>
            </div>
        </div>
        <el-dialog title="充值金额" :visible.sync="log" :close-on-click-modal="false" width="680px">
            <div>
                <el-form ref="form" @submit.native.prevent label-width="120px">
                    <el-form-item label="充值金额：">
                        <div class="flexc">
                            <div :class="salemoney == 5 ? 'red':'w'" @click="choose(5)">5</div>
                            <div :class="salemoney == 20 ? 'red':'w'" @click="choose(20)">20</div>
                            <div :class="salemoney == 50 ? 'red':'w'" @click="choose(50)">50</div>
                            <div :class="salemoney == 100 ? 'red':'w'" @click="choose(100)">100</div>
                            <div :class="salemoney == 500 ? 'red':'w'" @click="choose(500)">500</div>
                            <div :class="salemoney == 1000 ? 'red':'w'" @click="choose(1000)">1000</div>
                            <div :class="salemoney == 3000 ? 'red':'w'" @click="choose(3000)">3000</div>
                            <div :class="salemoney == 5000 ? 'red':'w'" @click="choose(5000)">5000</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="销售价格：">
                        ￥{{salemoney}}元
                    </el-form-item>
                    <el-form-item label="付款二维码：">
                        <div class="qrcode" ref="qrCodeUrl"></div>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="log = false" round >关闭</el-button>
            </span>
        </el-dialog>

        </div>
        <!-- 手机版 -->
        <div v-if="shoujiban" style="color:rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
            <topandleft></topandleft>
            <div style="background: #fff; padding: 0.3rem;">
                <div class="flexc" style="margin-bottom: 0.3rem;">
                <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
                <div style="font-size: 0.36rem; font-weight: bold;">财务管理</div>
                </div>
                <div class="flexc" style="margin-bottom: 0.3rem;">
                <div style="color: rgb(175, 179, 188);">首页</div>
                <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
                <div style="color: rgb(175, 179, 188);">财务管理</div>
                <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
                <div>收款账户配置</div>
                </div>
            </div>
            <div style="padding: 0.3rem;">


            </div>
        </div>
    </div>
</template>



<script>
  import QRCode from 'qrcodejs2'
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'shoukuanzhanghupeizhi',
    components:{
      left,top,topandleft,footers
    },
		data() {
			return {
                list:[
                  {sale_name:"小螺号基础订单费",pv:"按照阶梯性计费，无其他费用，月1-1000单0.2/单、超过1000单部分按照单0.1/单",uv:"按量定价"}
                ],
                widthss:false,
                shoujiban:false,
                balance:0,
                log:false,
                salemoney:0,

                xunhuan:"",
                choosed:"",
                ing:false
			}
		},
		created() {
            this.getlist()
		},
		mounted() {

            if(window.screen.width == 1920){
                this.widthss = true
            }
            document.addEventListener('paste', this.getClipboardFiles)

            if(window.screen.width < 1080){
                this.shoujiban = true
                var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;

            }else{

            }
		},
    beforeDestroy() {
      clearTimeout(this.xunhuan)
    },
		methods: {
      ed:function(){
          axios.get('/own/gth/recharge/result?id='+this.choosed.id)
              .then(response => {
                      if(response.data.msg.code == 0){
                          if(response.data.data.status == 100){
                              this.$message({
                                  message: '充值成功！',
                                  type: 'success'
                              });
                              clearTimeout(this.xunhuan)
                              this.log = false
                              this.choosed = ""
                          }
                      }else{
                          this.$message.error(response.data.msg.info);
                      }
              })
      },
      choose:function(num){
        if(this.ing){
          return false
        }
        this.ing = true
        this.salemoney = num
        this.$refs.qrCodeUrl.innerHTML = '';
        var that = this
        axios.post('/own/gth/recharge',{product_id:num})
            .then(response => {
                if(response.data.msg.code != 0){
                    this.$message.error(response.data.msg.info);
                }else{
                  this.choosed =  response.data.data

                  this.xunhuan = setInterval(()=>{
                    this.ed()
                  },3000)

                  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                      text: response.data.data.pay_info, // 需要转换为二维码的内容
                      width: 200,
                      height: 200,
                      colorDark: '#000000',
                      colorLight: '#ffffff',
                      correctLevel: QRCode.CorrectLevel.H
                  })

                  this.ing = false
                }
            })
      },
      getlist:function(){
        axios.get('/own/gth/balance').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.balance = response.data.data.balance
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>

<style scoped>
  .w{ background: #eaeaea; width: 50px; height: 50px; text-align: center; line-height: 50px; border: 1px #eaeaea solid; margin-right: 5px; border-radius: 5px; cursor: pointer;}
  .red{ color: #f00; border: 1px #f00 solid;  width: 50px; height: 50px; text-align: center; line-height: 50px;  margin-right: 5px; border-radius: 5px;  cursor: pointer;}
.t_yzh{
  color: #005AFF;
  background-color: #E4EDFF;
  padding: 5px 10px;
  border-radius: 25px;
  font-size: 12px;
  cursor: pointer;
}
</style>
<style scoped lang="less">
.shoukuanzhanghupeizhi{

}
</style>

